<template>
  	<div>
  		<div class="content">
  			<div class="jl">
  				距离拼抢结束
  			</div>
  		</div>
  		<div class="shijian1">
  			<center>
	  			<input type="button" value="02"class="shijian_yq"/>天
	  			<input type="button" value="23"class="shijian_yq"/>:
	  			<input type="button" value="23"class="shijian_yq"/>:
	  			<input type="button" value="23"class="shijian_yq"/>
  			</center>
  		</div>
  		<div class="yqhy_1">
  			邀请好友助力，点击右上角发送给好友
  		</div>
  		<div class="yaoqing">
  			<input type="button" value="邀请好友助力"/>
  		</div>
  		<div v-show="fenxiang" style="position: absolute;height: 100%;width: 100%;background: rgba(0,0,0,0.8);top: 0px;left: 0px;">
  			
	  		<div  @click="enjoying" style="height: 25px;width: 100%;padding: 0 31px;position: absolute;top: 50%;margin-top: -110px;">
	  			<span style="line-height: 25px;font-size: 18px;text-align: center;color: #FFFFFF;">邀请好友助力，点击右上角发送给朋友</span>
	  		</div>
	  		
	  		<div style="height: 88px;width:50px;position: absolute;margin-left: 250px;margin-top: 68px;">
  				<div><img src="static/zhishi.png" style="display: block;width: 200%;"></div>
  			</div>
  		</div>
  		<div v-show="enjoy" @click="disenjog" style="position: absolute;height:100%;width: 100%;background: rgba(0,0,0,0.5);top: 0px;left: 0px;">
	  		
  		</div>
  			
  		<div v-show="enjoy" style="z-index: 10; width: 250px;height: 215px;background: #FFFFFF;position: absolute;top:50%;left:50%;margin-left: -125px;margin-top: -108px;border-radius: 5px;">
			
			<div class="fe_cheng">
				<div class="tu_pian"><img src="static/successful_small.png"></div>
				<div class="fen_chenggong">分享成功</div>
			</div>
			<div class="fen_xiang">
				<div class="fen_xiangcishu">分享次数越多，拼抢成功率越高</div>
			</div>
			<router-link to="/haoxingdi">
			<div class="zu_li">
				<input type="button" value="助力拼抢" class="p_q"/>
			</div>
			</router-link>
			<router-link to="/shangpingxiangqing_pqqk">
			<div class="fa_hu">
				<input type="button" value="返回拼抢ing" class="f_h"/>
			</div>
			</router-link>
		</div>
  	</div>
  
</template>

<script>
//import { Group, Cell } from 'vux'

export default {
  components: {
//  Group,
//  Cell
  },
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      fenxiang:true,
      enjoy:false,
      msg: 'Hello World!',
    }
  },
   methods: {
			enjoying(){
				this.enjoy = true;
				this.fenxiang = false;
			},
			
			disenjog(){
				this.enjoy = false;
			},
		}
}
</script>

<style>
.content{
		width: 100%;
		border: 1px /*solid*/ red;
	}
.jl{width: 100%;
		text-align: center;
		line-height: 13px;
		font-size: 13px;
		color: #4a4a4a;
		margin-top: 90px;
		
	}
	.zl{
		width: 100%;
		text-align: center;
		line-height: 22px;
		font-size: 16px;
		color: #333;
	}
.yqhy_1{width: 100%;
		text-align: center;
		line-height: 22px;
		font-size: 16px;
		color: #4a4a4a4a;
		margin-top: 80px;
		
	}
.shijian1{
		float: left;
		width: 100%;
		border: 1px /*solid*/ green;
		margin-top: 10px;
		
	}
.shijian_yq{
		width: 44px;
		height: 44px;
		background-color: #00c850;
		color: #FFFFFF;
		line-height: 18px;
		padding: 0 14px;
		margin: 0 4px;
		border: 1px solid #00c850;
	}
.yaoqing{
		margin-top: 20px;
		padding: 0 15px;
}
	
.yaoqing input{
		width: 100%;
		height: 44px;
		background-color: #00c850;
		border: 1px solid #00c850;
		color: #fff;
		margin: 0 auto;
	}
</style>